<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>jQuery产品图片360度旋转DEMO演示</title>

<link href="./static/css/bootstrap.min.css" rel="stylesheet">

<link href="./static/css/page.css" rel="stylesheet">

<!--[if lt IE 9]>

<script src="js/html5shiv.min.js"></script>

<script src="js/respond.js"></script>

<![endif]-->

</head>

<body>

<div class="container pb30">

	<div class="row">

		<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">

			<div class="panel panel-default">

			  <div class="panel-body">

				<div id="circlr">

				  <img data-src="./static/images/00.jpg">

				  <img data-src="./static/images/01.jpg">

				  <img data-src="./static/images/02.jpg">

				  <img data-src="./static/images/03.jpg">

				  <img data-src="./static/images/04.jpg">

				  <img data-src="./static/images/05.jpg">

				  <img data-src="./static/images/06.jpg">

				  <img data-src="./static/images/07.jpg">

				  <img data-src="./static/images/08.jpg">

				  <img data-src="./static/images/09.jpg">

				  <img data-src="./static/images/10.jpg">

				  <img data-src="./static/images/11.jpg">

				  <img data-src="./static/images/12.jpg">

				  <img data-src="./static/images/13.jpg">

				  <img data-src="./static/images/14.jpg">

				  <img data-src="./static/images/15.jpg">

				  <div id="loader"></div>

				</div>

			  </div>

			</div>

			<div class="col-sm-3 text-center">

			  <h4>循环</h4>

			  <p>

				<div class="btn-group" data-toggle="buttons">

				  <label class="btn btn-default" onclick="crl.set({ cycle : false });">

					<input type="radio" name="vertical"> NO

				  </label>

				  <label class="btn btn-default active" onclick="crl.set({ cycle : true });">

					<input type="radio" name="vertical" checked> Yes

				  </label>

				</div>

			  </p>

			</div>

			<div class="col-sm-3 text-center">

			  <h4>反转</h4>

			  <p>

				<div class="btn-group" data-toggle="buttons">

				  <label class="btn btn-default active" onclick="crl.set({ reverse : false });">

					<input type="radio" name="vertical" checked> NO

				  </label>

				  <label class="btn btn-default" onclick="crl.set({ reverse : true });">

					<input type="radio" name="vertical"> Yes

				  </label>

				</div>

			  </p>

			</div>

			<div class="col-sm-6 text-center">

			  <h4>方向</h4>

			  <p>

				<div class="btn-group" data-toggle="buttons">

				  <label class="btn btn-default active" onclick="crl.set({ vertical : false });">

					<input type="radio" name="vertical" checked> 水平

				  </label>

				  <label class="btn btn-default" onclick="crl.set({ vertical : true });">

					<input type="radio" name="vertical"> 垂直

				  </label>

				</div>

			  </p>

			</div>

			<div class="col-sm-4 text-center">

			  <h4>动画旋转</h4>

			  <p>

				<a href="#" class="btn btn-default" onclick="crl.turn(9); return false;">第10帧</a>

				<a href="#" class="btn btn-default" onclick="crl.turn(0); return false;">第1帧</a>

			  </p>

			</div>

			<div class="col-sm-4 text-center">

			  <h4>显示</h4>

			  <p>

				<a href="#" class="btn btn-default" onclick="crl.go(9); return false;">第10帧</a>

				<a href="#" class="btn btn-default" onclick="crl.go(0); return false;">第1帧</a>

			  </p>

			</div>

			<div class="col-sm-4 text-center">

			  <h4>自动播放</h4>

			  <p>

				<a href="#" class="btn btn-default" onclick="crl.play(); return false;">开始</a>

				<a href="#" class="btn btn-default" onclick="crl.stop(); return false;">停止</a>

			  </p>

			</div>

		</div>

	</div>

</div>



<script src="./static/js/jquery.min.js"></script>

<script src="./static/js/bootstrap.min.js"></script>

<script src="./static/js/circlr.min.js"></script>



<script type="text/javascript">

	var crl = circlr('circlr', {

	  scroll : true,

	  loader : 'loader'

	});

</script>



<div style="text-align:center;clear:both;">

	<script src="./static/js/gg_bd_ad_720x90.js" type="text/javascript"></script>

	<script src="./static/js/follow.js" type="text/javascript"></script>

</div>

</body>

</html>